import React from 'react';
import { Menu } from 'antd';
import { Link, useLocation } from 'react-router-dom';
import './SiderMenu.scss';
import SubMenu from 'antd/es/menu/SubMenu';

// 将数据转换为Ant Design Menu所需的格式
const convertToMenuItems = (data) => {
  return data.map((item) => {
    if (item.children && item.children.length > 0) {
      return {
        label: <div>{item.meta.title}</div>,
        key: item.path,
        children: convertToMenuItems(item.children), // 递归处理子菜单
      };
    }
    return {
      label: <Link to={item.component}>{item.meta.title}</Link>,
      key: item.path,
    };
  });
};

const SiderMenu = ({ menuData }) => {
  const location = useLocation();

  return (
    <div className="scrollable-menu">
    <Menu
      theme="dark"
      mode="inline"
      defaultSelectedKeys={[location.pathname]}
      selectedKeys={[location.pathname]}
      items={convertToMenuItems(menuData)} // 使用items属性
    />
    </div>
  );
};

export default SiderMenu;